<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        body {
            background: #f2f2f2
        }

        .aui-tab-item.aui-active {
            font-weight: bold;
            border-bottom: .1rem solid #E94B41;
            color: #333;
            font-size: .7rem;
        }

        .order-item {
            padding: 0 .6rem;
            margin: .6rem;
        }

        .btns {
            height: 2.8rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .btns button {
            height: 1.6rem;
            padding: 0 .6rem;
            line-height: 1.6rem;
            border: 1px solid #CCCCCC;
            border-radius: 1rem;
            margin-left: .6rem;
            background: #fff
        }
    </style>
</head>

<body>
  <div id="app">
    <section class="font-14 text-color-3">
        <div class="order-item white-bg-radius" tapmode @click='toOrderDetail'>
            <div class="height-44 flex-justify-between">
                <div class="flex-align-center">
                    <img class='img-18' src="../../image/index/logo1.png" alt="" style="margin-right:0.3rem">
                    <span class="font-semibold">万嘉便利店</span>
                </div>
                <div class="font-12 red-text">商家拒绝退款</div>
            </div>
            <div class="flex" style="position: relative;padding:0.6rem 0">
                <img src="../../image/index/logo1.png" alt="" style="height:4.3rem;width:4.3rem;margin-right:0.6rem">
                <div class="">
                    <div class="font-semibold">
                        轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身
                    </div>

                    <div class="text-color-9  font-10" style="margin-top:0.3rem">
                      去冰/五分甜
                    </div>
                    <div class="flex-justify-between" style="position: absolute;bottom:0.6rem;width:calc(100% - 4.7rem)">
                        <div class="text-color-9">
                            ×1
                        </div>
                        <div class="font-12">
                            ¥<span class="font-17">25</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btns">
                <button type="button" name="button">取消退款</button>
                <button type="button" name="button">修改申请</button>
            </div>
        </div>
        <div class="order-item white-bg-radius">
            <div class="height-44 flex-justify-between">
                <div class="flex-align-center">
                    <img class='img-18' src="../../image/index/logo1.png" alt="" style="margin-right:0.3rem">
                    <span class="font-semibold">万嘉便利店</span>
                </div>
                <div class="font-12 red-text">等待商家打款</div>
            </div>
            <div class="flex" style="position: relative;padding:0.6rem 0">
                <img src="../../image/index/logo1.png" alt="" style="height:4.3rem;width:4.3rem;margin-right:0.6rem">
                <div class="">
                    <div class="font-semibold">
                        轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身
                    </div>
                    <div class="text-color-9  font-10" style="margin-top:0.3rem">
                      去冰/五分甜
                    </div>
                    <div class="flex-justify-between" style="position: absolute;bottom:0.6rem;width:calc(100% - 4.7rem)">
                        <div class="text-color-9">
                            ×1
                        </div>
                        <div class="font-12">
                            ¥<span class="font-17">25</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btns">
                <button type="button" name="button">提醒打款</button>
            </div>
        </div>
    </section>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript ">
          var vm = new Vue({
              el: '#app',
              data: {},
              methods: {
                  toOrderDetail: function() {
                      api.openFrame({
                        name: 'order-detail_win',
                        url: './order-detail_win.html',
                          bounces: true,
                          rect: {
                              x: 0,
                              y: 0,
                              w: 'auto',
                              h: 'auto'
                          }
                      })

                  }
              }

          });

    apiready = function() {

    }
</script>


</html>
